<template>
 
<!-- <div class="masklayer" >
   <span class="pattern left">
    <img src="../assets/download_pattern_left.png" />
  </span>
  <span class="pattern right">
    <img src="../assets/download_pattern_right.png" />
  </span>

</div> -->

 <div class="download-page">
<header itemscope="" itemtype="http://schema.org/SoftwareApplication">

</header>

    <div class="download-container">
      <div class="app-logo">
        <el-image
          :src="appInfo.iconUrl"
          fit="contain"
          style="width: 200px; height: 200px; border-radius:50px"
        />
      </div>
      
      <div class="qrcode-container">
        <div class="qrcode-title">扫描二维码下载</div>
        <div class="qrcode-image">
          <el-image
            :src="qrcodeUrl"
            fit="contain"
            style="width: 200px; height: 200px"
          />
        </div>
      </div>

      <div class="download-btn">
        <el-button 
          type="primary" 
          size="large"
          @click="handleDownload"
        >
          直接下载
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DownloadPage',
  data() {
    return {
      appInfo: {},
      qrcodeUrl: '',
      downloadUrl: '',
      pid:'',
       baseUrl: process.env.VUE_APP_BASE_API,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const appId = this.$route.query.appId
      const shortCode = this.$route.query.shortCode
      const pid = this.$route.query.pid
      if (!pid) {
        this.$message.error('缺少必要的参数')

        this.$router.back()
        return
      }
      
      // 这里需要调用API获取应用详情和下载链接
      this.getAppDetail({
        appId: appId,
        shortCode: shortCode,
        pid: pid
      })
    },
    
    async getAppDetail(params) {
      try {
        const res = await this.$api.home.getAppDetail(params)
        this.appInfo = {
          id: params.pid,
          name: res.name,
          iconUrl: this.baseUrl + '/api/v1/distribution/package/icon/' + params.pid,
          version: res.version
        }
        this.qrcodeUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' 
          + encodeURIComponent("http://192.168.1.36:8080" + '/download?appId=' 
          + params.appId + '&shortCode=' + params.shortCode + '&pid=' + params.pid)
        this.downloadUrl = this.baseUrl + '/api/v1/distribution/package/insert?appId=' 
          + params.appId + '&shortCode=' + params.shortCode + '&pid=' + params.pid
      } catch (err) {
        this.$message.error(err.message || '获取应用详情失败')
      }
    },
    
    async handleDownload() {
      console.log('开始下载处理')
      try {
        const params = {
          appId: this.$route.query.appId,
          shortCode: this.$route.query.shortCode,
          pid: this.$route.query.pid
        }
        console.log('请求参数:', params)

        // 直接使用window.location下载
        const downloadUrl = `${this.baseUrl}/api/v1/distribution/package/insert?`+`pid=${params.pid}`
        console.log('下载URL:', downloadUrl)
        
        window.location.href = downloadUrl
        this.$message.success('下载开始')
      } catch (err) {
        console.error('下载失败:', err)
        this.$message.error(err.message || '下载失败')
      }
    }
  }
}
</script>

<style scoped>

.masklayer {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-color: rgba(0, 0, 0, .5); */
    z-index: 99998
}

.pattern {
    position: absolute;
    top: 0;
    z-index: 1;
    max-width: 312px;
    width: 21.66%;
    transition: all .5s
}

.pattern.left {
    left: 0
}
.pattern.right {
    right: 0
}

.pattern img {
    width: 100%;
    transition: all 1s;
    pointer-events: none
}

.download-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.download-container {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.app-logo {
  margin-bottom: 30px;
  border-radius:50px
}

.qrcode-container {
  margin: 30px 0;
}

.qrcode-title {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.download-btn {
  margin-top: 30px;
}
</style>
